<template>
  <div class="partake-form">
    <div class="partake-form-info">
      <dir class="info-box">
        <div class="info-text">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;:</div>
        <div class="info-input"><input type="text" v-model="postData.name" placeholder="请填写你的真实姓名"></div>
      </dir>
      <dir class="info-box">
        <div class="info-text">手机号码&nbsp;:</div>
        <div class="info-input"><input type="text" v-model="postData.phone" placeholder="请输入手机号码"></div>
      </dir>
      <dir class="info-box">
        <div class="info-text">微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信&nbsp;:</div>
        <div class="info-input"><input type="text" v-model="postData.wechat" placeholder="请填写你的微信"></div>
      </dir>
      <dir class="info-box">
        <div class="info-text">企业名称&nbsp;:</div>
        <div class="info-input"><input type="text" v-model="postData.companyName" placeholder="请填写你的企业名称"></div>
      </dir>
      <dir class="info-box">
        <div class="info-text">单位职位&nbsp;:</div>
        <div class="info-input"><input type="text" v-model="postData.position" placeholder="请填写你的职位"></div>
      </dir>
      <dir class="info-box">
        <div class="info-text">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯&nbsp;:</div>
        <div class="info-input">
          <picker @change="bindPickerChange" :value="index" :range="pickerArray">
            <view>
              {{pickerText}}
            </view>
          </picker>
        </div>
      </dir>
      <dir class="info-box">
        <div class="info-text">是否为法人&nbsp;:</div>
        <div class="info-input">
          <radio-group @change="radioChange">
            <label class="radio" v-for="(item,index) in items" :key="index">
              <radio :value="item.name" :checked="item.checked" color="#2aa7e1" />{{item.value}}&nbsp;&nbsp;
            </label>
          </radio-group>
        </div>
      </dir>
      <dir class="info-box" v-if="postData.isLegalPerson == 1">
        <div class="info-text">法人信息&nbsp;:</div>
        <div class="info-input"><input type="text" v-model="postData.legal_info" placeholder="请填写法人信息"></div>
      </dir>
      <div class="info-box-mode">
        <div class="info-text">&nbsp;&nbsp;入会说明&nbsp;:</div>
        <div class="info-input"><textarea maxlength=-1 class="info-mode" placeholder="请填写入会说明"  v-model="postData.explanation"/></div>
      </div>
    </div>
    <div class="partake-form-btn" @click="reqAdmissionApplication">提交申请</div>
  </div>
</template>


<script>
import {mapActions} from 'vuex';
export default {
 data(){
   return{
    pickerArray: ['平福乡','宁康乡','藤州镇','塘步镇','琅南镇','同心镇','金鸡镇','新庆镇','象棋镇','岭景镇','天平镇','蒙江镇','和平镇','太平镇','古龙镇','东荣镇','大黎镇','其它'],
    pickerText:'平福乡',
    postData:{
      name:'',
      phone: '',//this.$store.state.userInfo.user_vip.phone
      wechat:'',
      companyName:'',
      position:'',
      legal_info:'',
      isLegalPerson: '',
      explanation: '',
    },
    items: [
      {name: '0', value: '否', checked: true},
      {name: '1', value: '是'},
    ]
   }
 },
 onShow(){
  this.postData = {
    name:'',
    phone: '',//this.$store.state.userInfo.user_vip.phone
    wechat:'',
    companyName:'',
    position:'',
    legal_info:'',
    isLegalPerson: '',
    explanation: '',
  };
  this.pickerText ='平福乡';
  this.postData.phone = this.$store.state.userInfo.user_vip.phone;
 },
 methods:{
   ...mapActions(["_reqUserInfo"]),
  bindPickerChange(e){
    this.pickerText = this.pickerArray[e.mp.detail.value];
  },
  //提交入会申请
  async reqAdmissionApplication(){
    var userToken = wx.getStorageSync('userToken'); 
    let params = {
      user_token: userToken,
      name: this.postData.name,
      phone: this.postData.phone,
      wechat: this.postData.wechat,
      company_name: this.postData.companyName,
      position: this.postData.position,
      birthplace: this.pickerText,
      is_legal_person: this.postData.isLegalPerson,
      legal_info: this.postData.legal_info,
      explanation: this.postData.explanation,
    }
    let res = await this.$api.postAdmissionApplication(params);
    wx.stopPullDownRefresh()
    if(res.data.level == "success"){
      wx.showToast({
        title: '提交入会申请成功',
        icon: 'none',
        duration: 1000
      })
      this._reqUserInfo();
      setTimeout(()=>{
        wx.reLaunch({
          url: '/pages/homeMain/applicationMessage/main'
        })
      },1500)
    }else{
      wx.showToast({
        title: res.data.message,
        icon: 'none',
        duration: 1000
      })
    }
  },
  radioChange(e) {
    if(e.mp.detail.value == 1){
      this.items[0].checked = false;
      this.items[1].checked = true;
    }else{
      this.items[0].checked = true;
      this.items[1].checked = false;
      this.postData.legal_info = "";
    }
    this.postData.isLegalPerson = e.mp.detail.value;
  }
 }
} 
</script>

<style lang="scss" scoped>
  .partake-form{
    width: 100%;
    height: 100vh;
    background-color: #f1f1f1;
    padding-top: 4rpx;
    .info-text{
      flex: 1;
      text-align: center;
    }
    .info-input{
      flex: 2;
    }
    .partake-form-info{
      width: 100%;
      background-color: #fff;
      .info-box{
        height: 40rpx;
        border: 1px solid #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding: 20rpx;
      }
      .info-box-mode{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        padding: 20rpx;
        .info-text{
          width: 100%;
          height: 200rpx;
        }
        .info-input{
          border: 1px #f1f1f1 solid;
        }
        .info-mode{
          padding: 20rpx;
          width: 100%;
          height: 200rpx;
        }
      }
    }
    .partake-form-btn{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background-color: rgb(110, 189, 235);
      color: #fff;
      font-size: 14px;
      :active{
        background-color: rgb(6, 127, 240);
      }
    }
    .region-content{
      color: #666;
    }
  }
</style>